// Name:            Style layout
// Description:     Sets  values for admin page layout HTML elements and customization.
//
// =============================================================================


// Variables
// =============================================================================

@header-min-height:                                        @navbar-min-height;
@header-padding-horizontal:                        @navbar-padding-horizontal;
@header-navbar-brand-width:                                             225px;

@header-ddm-font-size:                                                   12px;

@header-dropdown-list-border-color:                                   #BCD4E5;
@header-dropdown-list-bg-color:                                          #fff;
@header-dropdown-list-content-color:                                  #333333;
@header-dropdown-list-header-bg-color:                                #ECF2F7;
@header-dropdown-list-header-color:                                   #8090A0;

@header-ddl-content-fontsize:                           @header-ddm-font-size;
@header-ddl-content-padding:                                              5px;


/* dropdown content in mower header */
.mu-header-dropdown-list {
    max-width: 300px !important;
    min-width: 160px !important;
    width: 250px !important;
    padding: 0px;
    border: 1px solid transparent;
    background-color: transparent;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;

    &:before {
        position: absolute;
        top: -7px;
        left: 9px;
        display: inline-block !important;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-bottom: 7px solid transparent;
        content: '';
    }
    &:after {
        position: absolute;
        top: -6px;
        left: 10px;
        display: inline-block !important;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: 6px solid transparent;
        content: '';
    }
}


/* dropdown content header */

.mu-header-dropdown-list-header {
  padding: 0 8px;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  color: transparent;
  font-size: 13px;
  font-weight: bold;
  line-height: 34px;

  > i {
    margin-right: 5px !important;
  }
}

/* dropdown content  content */

.mu-header-dropdown-list-content {
  border-top-color: transparent;
  color: transparent;

  li {

    &:hover {
      background-color: #F4F9FC ! important;
    }

    &:first-child a {
      border-top: none;
      border-bottom: 1px solid #E4ECF3 !important;
    }

    &:last-child a {
      border-top: 1px solid white !important;
      border-bottom: 1px solid #E4ECF3 !important;
    }

    > a {
      display: block;
      clear: both;
      margin: 0px;
      padding: @header-ddl-content-padding;
      border-bottom: 1px solid;
      line-height: 20px;
      color: #555555;
      font-size: @header-ddl-content-fontsize;
      font-weight: normal;
      white-space: normal !important;

      &:active,&:hover,&:focus{
        background-image: none;
        background-color: rgba(0, 0, 0, 0) ! important;
        color: #555555;
        text-decoration: none;
      }
    }

    i {
      margin-right: 3px;
    }

    > a {
      border-bottom-color: #E4ECF3;
    }

  }
}

/* dropdown content  footer */
.mu-header-dropdown-list-footer {
  padding: 10px 8px;
  background-color: #f5f5f5;
  border-top: 1px solid transparent;

  a {
    display: block;
    white-space: normal !important;
    font-size: 13px;

    &:hover {

      background-image: none;
      background-color: #f5f5f5 !important;
      color: #000 !important;

    }
  }

}

.mu-header-dropdown-list-footer > a > i{
  float: right;
  margin-top: 3px;
  font-size: 16px !important;
}

.mu-header-dropdown-list-default {
    .mu-header-dropdown-list-variant( 
    @header-dropdown-list-border-color;
    @header-dropdown-list-bg-color;
    @header-dropdown-list-header-bg-color;
    @header-dropdown-list-header-color;
    @header-dropdown-list-content-color;
    )
}



/* styles for panel .
 ========================================================================== */

.mu-panel-toolbar {
    padding: 8px 10px;
}


/*
 * advanced query in toolbar.
 */
.advanced-query-container {
  position: absolute;
  right: 0;
  left: auto;
  top: 40px;
  z-index: 1010;
  display: none;
  text-align: left;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  white-space: normal;

  &:before {
    position: absolute;
    top: -7px;
    right: 9px;
    display: inline-block !important;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }

  &:after {
    position: absolute;
    top: -6px;
    right: 10px;
    display: inline-block !important;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
  }
}

.advanced-query-content {
  width: 600px;
  height: 400px;
  padding:5px;
}

/* styles for mower content body.
 ========================================================================== */
.mu-content-body {
    background: #eee;
    padding: 15px 15px 24px;
}

/* styles for mower footer container.
 ========================================================================== */
.mu-footer-container {
    margin: 0 auto;
    text-align: center;
}


/* loading container.
 ========================================================================== */
.loading-container {
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    background: #333;
    &.loading-inactive {
        display: none;
        .loader {
            display: none;
        }
    }

    .loader {
        position: absolute;
        display: block;
        text-align: center;
        font-size: 42px;
        color: #fff;
        top: 35%;
        width: 80px;
        left: 50%;
        margin-left: -40px;
    }
}